<template>
  <div>
    <!-- 
        v-for中的key的主要作用是用来提高列表的渲染能力的
     -->
    <h1>关于v-for中key的作用[理解]</h1>
    <ul>
        <li v-for="(item,index) in list" :key="index">
            {{item.id}}---{{item.name}}----{{item.age}} <input type="text">
        </li>
    </ul>
    <button @click="addPerson">添加</button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[
                {id:'1001',name:'张无忌',age:23},
                {id:'1002',name:'周芷若',age:24},
                {id:'1003',name:'张三丰',age:38}
            ]
        }
    },
    methods:{
        addPerson(){
            console.log('************');
            this.list.push({id:'1004',name:'张翠山',age:36})
            //this.list.unshift({id:'1004',name:'张翠山',age:36})
        }
    }
}
</script>

<style>

</style>